<template>
  <div class="message-container">
    <ContactPerson :user-list="userList" @open-chat-window="openChatWindow" />
    <ChatWindow v-if="!isEmptyObject(userInfo)" :user="userInfo" />
  </div>
</template>

<script setup>
import ContactPerson from '@/views/contact/index.vue'
import { onUnmounted, ref } from 'vue'
import ChatWindow from '@/views/chat/index.vue'
const userList = ref([])

userList.value = [
  //   { userName: '张三', avatar: '', address: '192.168.8.2', timestamp: new Date().toISOString() },
  //   { userName: '李四', avatar: '', address: '192.168.8.102', timestamp: new Date().toISOString() },
  //   { userName: '王五', avatar: '', address: '192.168.8.103', timestamp: new Date().toISOString() },
  //   {
  //     userName: '尼古拉斯赵四',
  //     avatar: '',
  //     address: '192.168.8.104',
  //     timestamp: new Date().toISOString()
  //   },
  //   { userName: '刘能', avatar: '', address: '192.168.8.105', timestamp: new Date().toISOString() },
  // { userName: '王强', avatar: '', address: '192.168.8.12', timestamp: new Date().toISOString() }
]

const userLogin = (e, message) => {
  console.info('有好友登录了')
  userList.value.push({
    userName: message.userName,
    avatar: '',
    address: message.address,
    timestamp: new Date().toISOString()
  })
}

window.ipcRenderer.on('login-message', userLogin)

onUnmounted(() => {
  window.ipcRenderer.removeListener('login-message', userLogin)
})

let userInfo = ref({})
const openChatWindow = user => {
  userInfo.value = user
}
const isEmptyObject = obj => {
  return Object.keys(obj).length === 0
}
</script>

<style lang="scss" scoped>
.message-container {
  display: flex;
}
</style>
